import React from 'react';
import { Button, Tools } from 'weaver-mobile';
import './index.less';
import { observer, inject } from 'mobx-react';
import If, { Then, Else } from '../../common/if';
import Loading from '../../common/loading';
import { withRouter } from 'react-router-dom';
import FormComponent from '../../common/form-components';

const ecCom =  window.ecCom;
const getLabel = Tools.getLabel;

let formatMultiLang = function(value) {
  return value;
}

export const Status = {
  EXAMINING: '0', // 审核中
  AGREE: '1', // 已同意
  REJECT: '2' // 已拒绝
}

@inject('ExamineStore')
@withRouter
@observer
export default class Examine extends React.Component {
  constructor(props) {
    super(props);

    this.store = props.ExamineStore;
    this.store.init();
    this.state = {
      submitStatus: this.store.status
    }
  }

  submit = status => {
    const { submit } = this.store;

    this.setState({ submitStatus: status });
    submit(status);
  }

  render () {
    const { status, loading, hasInit, data } =  this.store;
    const { submitStatus } = this.state;
    
    if (ecCom) {
      formatMultiLang =  ecCom.WeaLocaleProvider.formatMultiLang;
    }

    return (
      <div className='wea-edc-examine'>
        <If condition={!hasInit} >
          <Then>
            <Loading loading={true}/>
          </Then>
          <Else>
            <div className='header'>
              <span>{formatMultiLang(data.applicant) || ''}</span>{getLabel(523020, '正在向您申请表单')}<span>{formatMultiLang(data.appname) || ''}</span>{getLabel(523021, '的填写权限')}。{getLabel(523022, '表单如下')}：
            </div>
            <div className='form'>
              <FormComponent appid={data.appid} />
            </div>
            <div className='btns'>
              <If condition={status === Status.REJECT || status === Status.EXAMINING}>
                <Button 
                  type="warning" 
                  loading={ loading && submitStatus === Status.REJECT }
                  onClick={() => this.submit(Status.REJECT)}
                  disabled={status === Status.REJECT}
                >
                  {status === Status.REJECT ? getLabel(523023, '已拒绝') : getLabel(523024, '拒绝') }
                </Button>
              </If>
              <If condition={status === Status.AGREE || status === Status.EXAMINING}>
                <Button 
                  type="primary" 
                  loading={ loading && submitStatus === Status.AGREE}
                  onClick={() => this.submit(Status.AGREE)}
                  disabled={status === Status.AGREE}
                >
                  {status === Status.AGREE ? getLabel(523025, '已同意') : getLabel(523026, '同意') }
                </Button>
              </If>
            </div>
          </Else>
        </If>
      </div>
    )
  }
}